import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:jump_scape/js_ui/js_widget/js_style.dart';

class JsTextGhostingView extends StatelessWidget {
  final String text;
  final double fontSize;
  final Color fontForegroundColor;
  final Color fontBackgroundColor;
  final Color fontBorderColor;
  final double strokeWidthScale;
  const JsTextGhostingView(
    this.text, {
    super.key,
    required this.fontSize,
    this.fontForegroundColor = const Color(0xFFFFB5DD),
    this.fontBackgroundColor = const Color(0xFFFF3099),
    this.fontBorderColor = Colors.white,
    this.strokeWidthScale = 1,
  });

  @override
  Widget build(BuildContext context) {
    final scale = fontSize / 18.r;
    return Stack(
      alignment: Alignment.center,
      children: [
        Padding(
          padding: EdgeInsets.only(top: 3.r * scale + 2.r),
          child: Text(text, style: jsTextStyle(font: JsTextFont.EricaOne, fontColor: fontBackgroundColor, fontSize: fontSize)),
        ),
        Text(
          text,
          style: jsTextStyle(
            font: JsTextFont.EricaOne,
            fontColor: fontForegroundColor,
            fontSize: fontSize,
            shadows: [
              Shadow(offset: Offset(0, 4.r), blurRadius: 4.r, color: Colors.black.withOpacity(0.25)),
            ],
          ),
        ),
        Text(
          text,
          style: jsTextStyle(
            font: JsTextFont.EricaOne,
            fontSize: fontSize,
            foreground: Paint()
              ..style = PaintingStyle.stroke
              ..strokeWidth = 1.r * strokeWidthScale
              ..color = fontBorderColor,
          ),
        ),
      ],
    );
  }
}
